<template>
	<view class="delete-account-layout">
		<view class="delete-account-box">
			<xh-delete-account-header></xh-delete-account-header>
			<view class="delete-account-content-box">
				<view class="delete-account-content">
					<text>您当前进行的操作是注销账号操作。</text>
					<text class="delete-account-content-red">注销账号会将您的账号数据全部清空，并无法再次找回，因此请您谨慎操作。</text>
				</view>
				<text class="delete-account-content">注销账号后，该账号将不再享有会开店提供的平台服务。该账号的相关个人信息将与平台无关。</text>
			</view>
			<xh-delete-account-header title="账号信息"></xh-delete-account-header>
			<view class="account-info">
				<text class="account-info-text">账号名称：{{userStore.user.agentName}}</text>
				<text class="account-info-text">手机号：{{userStore.user.tel}}</text>
				<text class="account-info-text">钱包余额：{{dataInfo.balance}}</text>
				<text class="account-info-text">货款账单：{{dataInfo.billUnpayAmount}}</text>
				<text class="account-info-text">考核账单：{{dataInfo.assessUnpayAmount}}</text>
			</view>
		</view>
		<view class="submit-btn" :style="{marginTop:'100rpx'}" @tap="submit">确认注销</view>
		<xh-delete-account-pop ref="popRef"></xh-delete-account-pop>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getWalletsInfo,getBillInfo } from '@/common/api/api.js'
	import { useUserStore } from '@/common/stores'
	const userStore = useUserStore()
	const popRef = ref(null)
	const dataInfo = ref({
		balance:0,
		billUnpayAmount:0,
		assessUnpayAmount:0
	})
	import XhDeleteAccountHeader from './widget/xh-delete-account-header.vue'
	import XhDeleteAccountPop from './widget/xh-delete-account-pop.vue'
	const submit = ()=>{
		popRef.value.show()
	}
	//获取账户信息
	const getUserWalletAndBillInfo = async ()=>{
	   const res1 = await getWalletsInfo()
	   const res2 = await getBillInfo()
	   dataInfo.value.balance = res1.result.withdrawalAmount + res1.result.frozenAmount + res1.result.pendingRevenueAmount
	   dataInfo.value.billUnpayAmount = res2.result.billUnpayAmount
	   dataInfo.value.assessUnpayAmount = res2.result.assessUnpayAmount
	}
	onLoad(()=>{
		getUserWalletAndBillInfo()
	})
</script>

<style lang="scss" scoped>
	.delete-account-layout {
		padding: 30rpx;

		.delete-account-box {
			background-color: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;

			.delete-account-content-box {
				display: flex;
				flex-direction: column;
				padding: 30rpx 0;

				.delete-account-content {
					text-indent: 2rem;
					line-height: 50rpx;
					font-size: 26rpx;
				}

				.delete-account-content-red {
					color: $xh-red-color;
				}
			}

			.account-info {
				display: flex;
				flex-direction: column;
				align-items: center;

				.account-info-text {
					margin-top: 30rpx;
				}
			}
		}
	}
</style>